<template>
    <div class="sjzxBasicContainer">
        <div class="sjzxBasic">
            <Title
                titles="原始库资源统计"
                style="cursor: pointer"
                @click="handleBasicClick"
            />
            <div class="fours">
                <div
                    class="fours__item"
                    v-for="(item, index) in foursList"
                    :key="index"
                >
                    <div class="topWord">{{ item.name }}：</div>
                    <div class="topVal">
                        {{ item.value }}
                    </div>
                    <div class="bottomWord">
                        <span>{{ item.grow }}：</span>
                        <span>{{ item.growVal }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="sjzxBasic">
            <Title titles="接入资源统计" />
            <div class="fours1">
                <div
                    class="fours__item"
                    v-for="(item, index) in foursList1"
                    :key="index"
                >
                    <div class="topWord">
                        {{ item.name }}：
                        <span class="topVal">{{ item.value }}</span>
                    </div>
                    <div class="bottomWord">
                        <span>{{ item.grow }}：</span>
                        <span>{{ item.huanbi }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="sjzxBasic">
            <Title titles="资源接入" />
            <div id="chart4">
                <div class="chart4Header">
                    <div>新增数据名称</div>
                    <div>数据流量</div>
                    <div>部门</div>
                </div>
                <div class="myscroll1">
                    <ul class="flightBody">
                        <li
                            class="flightBodyList"
                            v-for="(item, index) in tbody1"
                            :key="index"
                        >
                            <div :title="item['name']">{{ item["name"] }}</div>
                            <div :title="item['size']">{{ item["size"] }}</div>
                            <div :title="item['time']">{{ item["time"] }}</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="sjzxBasic">
            <Title titles="资源库资源统计" />
            <div class="fours2">
                <div
                    class="fours__item"
                    v-for="(item, index) in foursList2"
                    :key="index"
                >
                    <div class="topWord">{{ item.name }}：</div>
                    <div class="topVal">
                        {{ item.value }}
                    </div>
                    <div class="bottomWord">
                        <span>{{ item.grow }}：</span>
                        <span>{{ item.growVal }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { onMounted, ref } from "vue";
import Title from "./LittleTitle.vue";
import { useStore } from "vuex";
import axios from "axios";
import countTo from "vue-count-to";
export default {
    components: {
        Title,
        countTo,
    },
    setup() {
        let store = useStore();
        let foursList = ref([
            {
                name: "数据总量",
                value: "1亿4138万条",
                grow: "月增量",
                growVal: "20个",
            },
            {
                name: "占用空间",
                value: "21GB",
                grow: "月增量",
                growVal: "20个",
            },
            {
                name: "接入资源",
                value: "33个",
                grow: "月增量",
                growVal: "20个",
            },
            {
                name: "接入部门",
                value: "201个",
                grow: "月增量",
                growVal: "20个",
            },
        ]);
        let foursList1 = ref([
            { name: "接口", value: "71个", grow: "月增量", growVal: "20个" },
            { name: "库表", value: "21个", grow: "月增量", growVal: "20个" },
            { name: "文件", value: "33个", grow: "月增量", growVal: "20个" },
            { name: "文件夹", value: "201个", grow: "月增量", growVal: "20个" },
        ]);
        let foursList2 = ref([
            {
                name: "数据总量",
                value: "1亿4138万条",
                grow: "月增量",
                growVal: "20个",
            },
            {
                name: "占用空间",
                value: "21GB",
                grow: "月增量",
                growVal: "20个",
            },
            {
                name: "接入资源",
                value: "33个",
                grow: "月增量",
                growVal: "20个",
            },
            {
                name: "接入部门",
                value: "201个",
                grow: "月增量",
                growVal: "20个",
            },
        ]);
        const getData = () => {
            //一、原始库资源统计
            axios
                .post(
                    "http://172.25.110.34/api/emergency-visual/union/v2/subject/scrn-v2-yskzytj/list",
                    {}
                )
                .then((res) => {
                    let vData = res.data.data[0];
                    foursList.value = [
                        {
                            name: "数据总量",
                            value: vData.sjzl + "条",
                            grow: "月增量",
                            growVal: vData.sjzl_yzl + "条",
                        },
                        {
                            name: "占用空间",
                            value: vData.zykj,
                            grow: "月增量",
                            growVal: vData.zykj_yzl,
                        },
                        {
                            name: "接入资源",
                            value: vData.jrzy + "个",
                            grow: "月增量",
                            growVal: vData.jrzy_yzl + "个",
                        },
                        {
                            name: "接入部门",
                            value: vData.jrbm + "个",
                            grow: "月增量",
                            growVal: vData.jrbm_yzl + "个",
                        },
                    ];
                });
            //二、接入资源统计
            axios
                .post(
                    "http://172.25.110.34/api/emergency-visual/union/v2/subject/scrn-v2-jrzytj/list",
                    {}
                )
                .then((res) => {
                    let vdata = res.data.data[0];
                    foursList1.value = [
                        {
                            name: "接口数",
                            value: vdata.jk + "个",
                            grow: "月增量",
                            huanbi: vdata.jk_yzl + "个",
                            color: "rgb(25, 241, 249)",
                        },
                        {
                            name: "库表数",
                            value: vdata.kb + "个",
                            grow: "月增量",
                            huanbi: vdata.kb_yzl + "个",
                            color: "rgb(25, 241, 249)",
                        },
                        {
                            name: "文件数",
                            value: vdata.wj + "个",
                            grow: "月增量",
                            huanbi: vdata.wj_yzl + "个",
                            color: "rgb(25, 241, 249)",
                        },
                        {
                            name: "文件夹",
                            value: vdata.wjj + "个",
                            grow: "月增量",
                            huanbi: vdata.wjj_yzl + "个",
                            color: "rgb(25, 241, 249)",
                        },
                    ];
                });
            //四、资源库资源统计
            axios
                .post(
                    "http://172.25.110.34/api/emergency-visual/union/v2/subject/scrn-v2-zykzytj/list",
                    {}
                )
                .then((res) => {
                    let vData = res.data.data[0];
                    foursList2.value = [
                        {
                            name: "数据总量",
                            value: vData.sjzl + "条",
                            grow: "月增量",
                            growVal: vData.sjzl_yzl + "条",
                        },
                        {
                            name: "占用空间",
                            value: vData.zykj,
                            grow: "月增量",
                            growVal: vData.zykj_yzl,
                        },
                        {
                            name: "接入资源",
                            value: vData.jrzy + "个",
                            grow: "月增量",
                            growVal: vData.jrzy_yzl + "个",
                        },
                        {
                            name: "生成接口",
                            value: vData.scjk + "个",
                            grow: "月增量",
                            growVal: vData.scjk_yzl + "个",
                        },
                    ];
                });
        };
        getData();
        // setInterval(()=>{
        //     getData();
        // },3000)

        //三、资源实时接入
        let tbody1 = ref([]);
        //http://172.25.110.34/api/emergency-visual/union/v2/subject/scrn-gbmjrzyssqk/list

        axios
            .post(
                "http://172.25.110.34/api/emergency-visual/union/v2/subject/scrn-sdsjptjrzyssqk/list",
                {}
            )
            .then((res) => {
                console.log(res.data);
                console.log(res.data.data);
                tbody1.value = res.data.data;

                $(function () {
                    $(".myscroll1").myScroll({
                        speed: 30, //数值越大，速度越慢
                        rowHeight: 30, //li的高度
                    });
                });
            });
        const handleBasicClick = () => {
            let state = store.state.sjzxBasicDetail;
            store.commit("changeSjzxBasicDetail", !state);
        };
        onMounted(() => {
            $(function () {
                $(".myscroll1").myScroll({
                    speed: 50, //数值越大，速度越慢
                    rowHeight: 50, //li的高度
                });
            });
        });
        return {
            foursList,
            foursList1,
            foursList2,
            tbody1,
            handleBasicClick,
        };
    },
};
</script>

<style lang="stylus" scoped>
.sjzxBasicContainer {
    width: vw(400);
    height: 100%;
    padding: vh(15) vw(15);

    .sjzxBasic {
        width: vw(370);

        .title {
            background: url('/images/sjzx/title.png') no-repeat;
            background-size: 100% 100%;
            height: vh(26);
            width: vw(344);

            div.titleWord {
                height: vh(26);
                line-height: vh(10);
            }
        }

        .fours {
            padding-top: vh(15);
            padding-bottom: vh(15);
            width: vw(370);
            height: vh(200);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            item-aligns: center;

            .fours__item {
                width: vw(180);
                height: vh(80);
                background: url('/data/images/sjzl/fours.png') no-repeat;
                background-size: 100% 100%;
                padding-left: vw(25);
                padding-top: vh(5);
                padding-bottom: vh(5);
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                cursor: pointer;

                .topWord {
                    font-size: vw(14);
                }

                .topVal {
                    font-size: vw(17);
                    text-indent: vw(5);
                    color: #10DAFF;
                }

                .bottomWord {
                    text-align: right;

                    span:nth-child(1) {
                        // color:rgba(255,241,148,1)
                        color: #fff;
                        font-size: vw(14);
                    }

                    span:nth-child(2) {
                        font-size: vw(14);
                        padding-left: vw(20);
                    }
                }
            }

            .fours__item:nth-child(1) {
                .bottomWord {
                    span:nth-child(1) {
                        font-size: $f14;
                    }

                    span:nth-child(2) {
                        font-size: $f14;
                        padding-left: vw1(2);
                    }
                }
            }

            .fours__item:nth-child(2) {
                .bottomWord {
                    span:nth-child(1) {
                        font-size: $f14;
                    }

                    span:nth-child(2) {
                        font-size: $f14;
                        padding-left: vw1(2);
                    }
                }
            }

            .fours__item:nth-child(3) {
                .bottomWord {
                    span:nth-child(1) {
                        font-size: $f14;
                    }

                    span:nth-child(2) {
                        font-size: $f14;
                        padding-left: vw1(2);
                    }
                }
            }

            .fours__item:nth-child(4) {
                .bottomWord {
                    span:nth-child(1) {
                        font-size: $f16;
                    }

                    span:nth-child(2) {
                        font-size: $f14;
                        padding-left: vw1(2);
                    }
                }
            }
        }

        .fours1 {
            padding-top: vh(10);
            padding-bottom: vh(10);
            height: vh(200);
            width: vw(370);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            item-aligns: center;

            .fours__item {
                width: vw(170);
                height: vh(80);
                padding-left: vw(25);
                display: flex;
                background: url('/data/images/sjzl/title.png') no-repeat;
                background-size: 100% 100%;
                flex-direction: column;
                justify-content: space-around;
                cursor: pointer;

                .topWord {
                    font-size: vw(16);

                    .topVal {
                        font-size: vw(18);
                        text-indent: vw(5);
                        color: #10DAFF;
                    }
                }

                .bottomWord {
                    span:nth-child(1) {
                        // color:rgba(255,241,148,1)
                        color: #fff;
                        font-size: vw(14);
                    }

                    span:nth-child(2) {
                        font-size: vw(14);
                        padding-left: vw(20);
                    }
                }
            }

            .fours__item:nth-child(1) {
                .bottomWord {
                    span:nth-child(1) {
                        font-size: $f14;
                    }

                    span:nth-child(2) {
                        font-size: $f14;
                        padding-left: vw1(2);
                    }
                }
            }

            .fours__item:nth-child(2) {
                .bottomWord {
                    span:nth-child(1) {
                        font-size: $f14;
                    }

                    span:nth-child(2) {
                        font-size: $f14;
                        padding-left: vw1(2);
                    }
                }
            }

            .fours__item:nth-child(3) {
                .bottomWord {
                    span:nth-child(1) {
                        font-size: $f14;
                    }

                    span:nth-child(2) {
                        font-size: $f14;
                        padding-left: vw1(2);
                    }
                }
            }

            .fours__item:nth-child(4) {
                .bottomWord {
                    span:nth-child(1) {
                        font-size: $f16;
                    }

                    span:nth-child(2) {
                        font-size: $f14;
                        padding-left: vw1(2);
                    }
                }
            }
        }

        .fours2 {
            margin-top: vh(15);
            height: vh(200);
            width: vw(370);
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            background: url('/images/sjzx/centerContent.png') no-repeat;
            background-size: 100% 100%;

            .fours__item {
                width: vw(170);
                height: vh(85);
                padding-left: vw(25);
                display: flex;
                padding-top: vh(10);
                flex-direction: column;
                justify-content: space-around;
                cursor: pointer;

                .topWord {
                    font-size: vw(16);
                }

                .topVal {
                    font-size: vw(17);
                    text-indent: vw(15);
                    color: #10DAFF;
                }

                .bottomWord {
                    text-align: right;

                    span:nth-child(1) {
                        // color:rgba(255,241,148,1)
                        color: #fff;
                        font-size: vw(14);
                    }

                    span:nth-child(2) {
                        font-size: vw(14);
                        padding-left: vw(20);
                        padding-right: vw(20);
                    }
                }
            }

            .fours__item:nth-child(1) {
                .bottomWord {
                    span:nth-child(1) {
                        font-size: $f14;
                    }

                    span:nth-child(2) {
                        font-size: $f14;
                        padding-left: vw1(2);
                    }
                }
            }

            .fours__item:nth-child(2) {
                .bottomWord {
                    span:nth-child(1) {
                        font-size: $f14;
                    }

                    span:nth-child(2) {
                        font-size: $f14;
                        padding-left: vw1(2);
                    }
                }
            }

            .fours__item:nth-child(3) {
                .bottomWord {
                    span:nth-child(1) {
                        font-size: $f14;
                    }

                    span:nth-child(2) {
                        font-size: $f14;
                        padding-left: vw1(2);
                    }
                }
            }

            .fours__item:nth-child(4) {
                .bottomWord {
                    span:nth-child(1) {
                        font-size: $f16;
                    }

                    span:nth-child(2) {
                        font-size: $f14;
                        padding-left: vw1(2);
                    }
                }
            }
        }

        #chart4 {
            width: vw(370);
            height: vh(200);
            background: url('/images/sjzx/shikuang.png') no-repeat;
            background-size: 100% 100%;
            margin-top: vh(10);
            padding-top: vh(10);
            margin-bottom: vh(20);
            padding-left: vw(20);
            padding-right: vw(20);

            .chart4Header {
                display: flex;
                justify-content: space-between;
                background: rgba(24, 39, 68, 0);
                font-size: $f18;

                div:nth-child(1) {
                    text-align: center;
                    line-height: vh(30);
                    flex: 5;
                }

                div:nth-child(2) {
                    text-align: center;
                    line-height: vh(30);
                    flex: 2;
                }

                div:nth-child(3) {
                    text-align: center;
                    line-height: vh(30);
                    flex: 4;
                }
            }

            .myscroll1 {
                height: vh(150);
                overflow: hidden;

                .flightBody {
                    cursor: pointer;

                    .flightBodyList {
                        display: flex;
                        justify-content: space-between;
                        // width: vw1(610)
                        height: vh(30);
                        line-height: vh(30);
                        font-size: vw(12);

                        div:nth-child(1) {
                            flex: 5;
                            text-align: center;
                            font-weight: 400;
                            ellipsis();
                        }

                        div:nth-child(2) {
                            flex: 2;
                            text-align: center;
                            font-weight: 400;
                            ellipsis();
                        }

                        div:nth-child(3) {
                            flex: 4;
                            text-align: center;
                            font-weight: 400;
                            ellipsis();
                        }
                    }
                }
            }
        }
    }
}
</style>